import React, { useState } from 'react';
import { Card, Table, Button, Space, Switch, Input, Select, message } from 'antd';
import { PlusOutlined, SearchOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import './index.less';

const { Option } = Select;

interface DataElementItem {
  key: string;
  code: string;
  name: string;
  definition: string;
  dataType: string;
  format: string;
  valueRange?: string;
  enabled: boolean;
  sortNo: string;
  hasDropdown?: boolean;
}

const DataElement: React.FC = () => {
  const [searchValue, setSearchValue] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');

  const handleStatusChange = (checked: boolean, record: DataElementItem) => {
    console.log(`状态变更: ${checked ? '启用' : '禁用'}`, record);
    message.success(`${record.name} 已${checked ? '启用' : '禁用'}`);
  };

  const columns = [
    {
      title: '标识符',
      dataIndex: 'code',
      key: 'code',
      width: 150,
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: 180,
    },
    {
      title: '定义',
      dataIndex: 'definition',
      key: 'definition',
      width: 300,
    },
    {
      title: '数据类型',
      dataIndex: 'dataType',
      key: 'dataType',
      width: 100,
      render: (dataType: string, record: DataElementItem) => (
        <div className="type-cell">
          {dataType}
          {record.hasDropdown && <span className="dropdown-icon">▼</span>}
        </div>
      ),
    },
    {
      title: '表达形式',
      dataIndex: 'format',
      key: 'format',
      width: 120,
      render: (format: string, record: DataElementItem) => (
        <div className="type-cell">
          {format}
          {record.hasDropdown && <span className="dropdown-icon">▼</span>}
        </div>
      ),
    },
    {
      title: '允许值',
      dataIndex: 'valueRange',
      key: 'valueRange',
      width: 220,
      render: (text: string, record: DataElementItem) => (
        <>
          {text && text.includes('GB/T') && (
            <div className="reference-value">
              {text}
              {record.hasDropdown && <span className="dropdown-icon">▼</span>}
            </div>
          )}
          {text && !text.includes('GB/T') && text}
        </>
      ),
    },
    {
      title: '有效状态',
      dataIndex: 'enabled',
      key: 'enabled',
      width: 100,
      render: (enabled: boolean, record: DataElementItem) => (
        <Switch 
          checked={enabled} 
          onChange={(checked) => handleStatusChange(checked, record)}
          size="small"
          className="status-switch"
        />
      ),
    },
    {
      title: '排序号',
      dataIndex: 'sortNo',
      key: 'sortNo',
      width: 100,
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: DataElementItem) => (
        <Space size="small" className="action-buttons">
          {record.name ? (
            <>
              <a className="edit-link">编辑</a>
              <span className="divider">|</span>
              <a className="delete-link">删除</a>
            </>
          ) : (
            <>
              <a className="check-link"><CheckCircleOutlined /></a>
              <a className="close-link"><CloseCircleOutlined /></a>
            </>
          )}
        </Space>
      ),
    },
  ];

  // 根据图片创建更真实的数据
  const data: DataElementItem[] = [
    {
      key: '1',
      code: 'DE02.10.076.00',
      name: '性病代码',
      definition: '艾滋病、梅毒、淋病宫颈炎等性传播疾病、生殖器疱疹、不含细菌流行性阴道炎等特异性阴道炎的代码',
      dataType: 'S2',
      format: 'AN_20',
      valueRange: '1.有 2.无 3.不详',
      enabled: true,
      sortNo: '10001',
      hasDropdown: false
    },
    {
      key: '2',
      code: 'DE02.10.095.00',
      name: '家族史疾病名称代码',
      definition: '个体近亲家族有疾病史的疾病在特定代码体系中的代码',
      dataType: 'S3',
      format: 'AN_20',
      valueRange: 'CV02.10.005 既往家族疾病代码表',
      enabled: true,
      sortNo: '10002',
      hasDropdown: true
    },
    {
      key: '3',
      code: 'DE03.00.088.00',
      name: '次剂时间 (min)',
      definition: '个体干预给予活动间时间长度，计量单位为min',
      dataType: 'N',
      format: 'AN_20',
      enabled: true,
      sortNo: '10003',
      hasDropdown: false
    },
    {
      key: '4',
      code: 'DE02.01.025.00',
      name: '民族',
      definition: '患者所属民族在特定编码体系中的代码',
      dataType: 'S3',
      format: 'N2',
      valueRange: 'GB/T 3304-1991 民族',
      enabled: true,
      sortNo: '10004',
      hasDropdown: true
    },
    {
      key: '5',
      code: 'DE02.01.025.00',
      name: '民族',
      definition: '患者所属民族在特定编码体系中的代码',
      dataType: 'S3',
      format: 'N2',
      valueRange: 'GB/T 3304-1991 民族',
      enabled: true,
      sortNo: '10005',
      hasDropdown: true
    },
    {
      key: '6',
      code: '',
      name: '',
      definition: '请输入定义',
      dataType: 'S1',
      format: '请输入表示格式',
      valueRange: '请输入允许值',
      enabled: true,
      sortNo: '10006',
      hasDropdown: false
    },
    {
      key: '7',
      code: '',
      name: '',
      definition: '请输入定义',
      dataType: 'S2',
      format: '请输入表示格式',
      valueRange: '请输入允许值，用1作为分隔符',
      enabled: true,
      sortNo: '10007',
      hasDropdown: false
    }
  ];

  // 过滤数据
  const filteredData = data.filter(item => {
    const matchesSearch = !searchValue || 
      item.code.toLowerCase().includes(searchValue.toLowerCase()) || 
      item.name.toLowerCase().includes(searchValue.toLowerCase());
    const matchesStatus = statusFilter === 'all' || 
      (statusFilter === 'enabled' && item.enabled) || 
      (statusFilter === 'disabled' && !item.enabled);
    return matchesSearch && matchesStatus;
  });

  return (
    <div className="dataelement-container">
      <div className="tab-header">
        <div className="tab-item">数据集</div>
        <div className="tab-item active">数据元</div>
      </div>
      
      <div className="page-content">
        <div className="page-header">
          <div className="header-icon"></div>
          <h3>数据元</h3>
        </div>
        
        <Card bordered={false}>
          <div className="table-top">
            <Space>
              <Button type="primary" icon={<PlusOutlined />}>
                添加数据元素
              </Button>
              <Select 
                value={statusFilter} 
                onChange={(value) => setStatusFilter(value)}
                style={{ width: 120 }}
              >
                <Option value="all">可用</Option>
                <Option value="enabled">启用</Option>
                <Option value="disabled">禁用</Option>
              </Select>
            </Space>
            <Input.Search
              placeholder="标识符/名称"
              value={searchValue}
              onChange={(e) => setSearchValue(e.target.value)}
              onSearch={value => setSearchValue(value)}
              style={{ width: 300 }}
            />
          </div>
          <Table 
            columns={columns} 
            dataSource={filteredData}
            pagination={{
              pageSize: 15,
              showSizeChanger: true,
              showQuickJumper: true,
              showTotal: (total) => `每页 ${15} 条 (共${total}条)`,
            }}
            rowClassName={(record) => {
              if (record.code === 'DE02.01.025.00') return 'highlighted-row';
              return '';
            }}
          />
        </Card>
      </div>
    </div>
  );
};

export default DataElement; 
